<template>
  <div class="paper-box">
    <div class="paper-top">
      <el-row>
        <el-col :span="2">试卷名称:</el-col>
        <el-col :span="6"
          ><b>{{
            paperData.examinationPaperResponse.examinationPaperName
          }}</b></el-col
        >
        <el-col :span="2">考试次数:</el-col>
        <el-col :span="6"
          ><b>{{
            paperData.examinationPaperResponse.currentUserNumberOfExamsAllowed +
            '/' +
            paperData.examinationPaperResponse.numberOfExamsAllowed
          }}</b></el-col
        >
        <el-col :span="2">考试时长:</el-col>
        <el-col :span="6"
          ><b>{{
            paperData.examinationPaperResponse.duration + '分钟'
          }}</b></el-col
        >
      </el-row>
      <el-row style="margin-top: 10px">
        <el-col :span="2">试卷总分:</el-col>
        <el-col :span="6"
          ><b>{{ paperData.examinationPaperResponse.totalScore }}</b></el-col
        >

        <el-col :span="2">通过分数:</el-col>
        <el-col :span="6"
          ><b>{{ paperData.examinationPaperResponse.passScore }}</b></el-col
        >
        <el-col :span="3">考试结束时间:</el-col>
        <el-col :span="5"
          ><b>
            <div class="countCircle">
              <span>{{ countdown }}</span>
            </div></b
          ></el-col
        >
      </el-row>
    </div>

    <p
      v-show="!paperData.examinationPaperQuestionList"
      style="text-align: center"
    >
      未添加试题
    </p>
    <div class="setup" />
    <el-card
      v-for="(
        examinationPaperQuestion, index
      ) in paperData.examinationPaperQuestionList"
      :key="index"
      class="box-card"
      style="margin-top: 15px"
    >
      <div slot="header" class="clearfix">
        <span>{{ indexs[index] + type[examinationPaperQuestion.type] }}</span>
      </div>
      <el-row
        v-for="(
          question, questionIndex
        ) in examinationPaperQuestion.questionList"
        :key="questionIndex"
        style="margin-top: 15px"
      >
        <el-col :span="24" style="margin-bottom: 10px; font-size: 16px"
          >{{ parseInt(questionIndex) + 1 }}、{{ question.content }}(题分：<span
            style="color: red"
            >{{ question.score }}</span
          >分)</el-col
        >
        <el-col
          v-for="(option, optionIndex) in question.options"
          :key="optionIndex"
          style="padding: 5px 0px 5px 25px"
          >{{ option.opt }}.{{ option.content }}
        </el-col>
        <!-- 添加答案 -->
        <!-- 单选 -->
        <div v-if="examinationPaperQuestion.type == 1" class="MultipleChoice">
          <span>请选择答案：</span>
          <el-radio-group
            v-model="
              saveData.questionDataList[question.examinationQuestionId + 'key']
            "
          >
            <el-radio
              v-for="item in question.options"
              :key="item.examinationQuestionId"
              :label="item.opt"
              :value="item.examinationQuestionId"
              >{{ item.opt }}</el-radio
            >
          </el-radio-group>
        </div>
        <!-- 多选 -->
        <div v-if="examinationPaperQuestion.type == 2" class="MRoptions">
          <span>请选择答案：</span>
          <!-- v-for="item in examinationPaperQuestion.questionList" :key="item.examinationQuestionId"  -->
          <el-checkbox-group
            v-if="dataList.length > 0"
            v-model="dataList[question.examinationQuestionId]"
          >
            <el-checkbox
              v-for="item in question.options"
              :key="item.examinationQuestionId"
              :label="item.opt"
              :value="item.opt"
            >
              {{ item.opt }}
            </el-checkbox>
          </el-checkbox-group>
        </div>
        <!-- 判断 -->
        <div v-if="examinationPaperQuestion.type == 3" class="Judge">
          <span>请选择答案：</span>
          <el-radio-group
            v-model="
              saveData.questionDataList[question.examinationQuestionId + 'key']
            "
          >
            <el-radio
              v-for="item in question.options"
              :key="item.examinationQuestionId"
              :label="item.opt"
              :value="item.content"
              >{{ item.content }}</el-radio
            >
          </el-radio-group>
        </div>
        <!-- 填空 -->
        <div v-if="examinationPaperQuestion.type == 4" class="GapFilling">
          <el-input
            v-model="
              saveData.questionDataList[question.examinationQuestionId + 'key']
            "
            type="textarea"
            :rows="2"
            placeholder="请输入内容"
          />
        </div>
        <!-- 简答 -->
        <div v-if="examinationPaperQuestion.type == 5" class="ShortAnswer">
          <el-input
            v-model="
              saveData.questionDataList[question.examinationQuestionId + 'key']
            "
            type="textarea"
            :rows="2"
            placeholder="请输入内容"
          />
        </div>
      </el-row>
    </el-card>
    <el-button type="primary" class="my-but" plain @click="pushAnswer"
      >提交</el-button
    >
  </div>
</template>

<script>
import { save } from '@/api/ts/record'
export default {
  name: 'ViewFixedPaper',
  props: {
    paperData: {
      required: true
    }
  },
  data() {
    return {
      type: ['未定义', '单选题', '多选题', '判断题', '填空题', '简答题'],
      indexs: ['一、', '二、', '三、', '四、', '五、', '六、'],
      dataList: [],
      saveData: {
        examinationPaperId:
          this.paperData.examinationPaperResponse.examinationPaperId,
        examineeTime: this.format('yyyy-MM-dd hh:mm:ss'),
        questionDataList: {}
      },
      countdown: this.paperData.examinationPaperResponse.duration * 60
    }
  },
  watch: {
    dataList(data) {
      this.getData()
      // this.sendCode()
    },
    paperData: {
      handler(data) {
        this.countdown = data.examinationPaperResponse.duration * 60
        // this.saveData = this.$options.data().saveData
        console.log(this.saveData, '43223')
        this.clearTimer()
        this.sendCode()
      },
      deep: true
    }
  },
  mounted() {
    this.multipleChoice()
    this.sendCode()
  },
  created() {
    // this.getData()
  },
  methods: {
    // 遍历
    multipleChoice() {
      const newObj = this.paperData.examinationPaperQuestionList[1] || []
      console.log(newObj, 'obj')
      const list = []
      if (newObj.type === 2) {
        newObj.questionList.forEach((item) => {
          list[item.examinationQuestionId] = []
        })
        this.dataList = list
      }
    },
    format(fmt) {
      var date = new Date()
      var o = {
        'M+': date.getMonth() + 1, // 月份
        'd+': date.getDate(), // 日
        'h+': date.getHours(), // 小时
        'm+': date.getMinutes(), // 分
        's+': date.getSeconds(), // 秒
        'q+': Math.floor((date.getMonth() + 3) / 3), // 季度
        S: date.getMilliseconds() // 毫秒
      }
      if (/(y+)/.test(fmt)) {
        fmt = fmt.replace(
          RegExp.$1,
          (date.getFullYear() + '').substr(4 - RegExp.$1.length)
        )
      }
      for (var k in o) {
        if (new RegExp('(' + k + ')').test(fmt)) {
          fmt = fmt.replace(
            RegExp.$1,
            RegExp.$1.length == 1
              ? o[k]
              : ('00' + o[k]).substr(('' + o[k]).length)
          )
        }
      }
      return fmt
    },
    getData() {
      console.log(this.paperData.examinationPaperQuestionList)
      this.paperData.examinationPaperQuestionList.forEach((item) => {
        if (item.type == 2) {
          console.log(item, 'item')
          item.questionList.forEach((item1) => {
            this.saveData.questionDataList[
              item1.examinationQuestionId + 'key'
            ] = this.dataList[item1.examinationQuestionId]
          })
        }
      })
    },
    pushAnswer() {
      for (const key in this.saveData.questionDataList) {
        if (this.saveData.questionDataList[key] instanceof Array) {
          this.saveData.questionDataList[key] =
            this.saveData.questionDataList[key].toString()
        }
      }
      this.saveData.trainId = this.paperData.trainId
      var saveData = JSON.stringify(this.saveData)
      // console.log(saveData, 'saveData')
      // return
      save({ saveData: saveData }).then((res) => {
        this.$message.success('保存成功')
        this.$emit('dialogStartTest', false)
        this.clearTimer()
      })
    },
    sendCode() {
      this.loading() // 启动定时器
      this.timer = setInterval(() => {
        // 创建定时器
        if (this.countdown === 1) {
          this.clearTimer() // 关闭定时器
          this.pushAnswer()
        } else {
          this.loading()
        }
      }, 1000)
    },
    loading() {
      // 启动定时器
      this.countdown = this.countdown - 1 // 定时器减1
      console.log(this.countdown,'3');
      if (this.countdown === 0) {
        this.pushAnswer()
      }
    },
    clearTimer() {
      // 清除定时器
      clearInterval(this.timer)
      this.timer = null
    }
  }
}
</script>

<style lang="scss" scoped>
.my-but {
  margin-left: 62vw;
  margin-top: 20px;
}
.paper-box {
  height: 700px;
  overflow: auto;
}
.paper-top {
  width: 68%;
  position: fixed;
  height: 80px;
  background-color: #ebeef5;
  z-index: 9999;
  padding: 20px;
}
.box-card {
  margin-top: 30px;
}
.setup {
  height: 80px;
}
</style>
